<template>
  <el-card class="list-card">
    <h2>我的签到</h2>
    <div v-for="item in checkIns" :key="item.id">
      <div>签到ID: {{ item.id }}</div>
      <div>活动名称: {{ eventTitles[item.eventId] || '加载中...' }}</div>
      <div>签到时间: {{ item.timestamp }}</div>
      <hr>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { checkInApi } from '../api/checkIn'
import { eventApi } from '../api/event'

const checkIns = ref<any[]>([])
const loading = ref(true)
const eventTitles = ref<Record<number, string>>({})

const user = JSON.parse(localStorage.getItem('user') || '{}')

onMounted(async () => {
  if (!user.userId) {
    loading.value = false
    return
  }
  const res = await checkInApi.getUserCheckIns(user.userId)
  checkIns.value = Array.isArray(res) ? res.map(c => ({ ...c, id: c.id || c.checkInId })) : []
  // 批量获取活动名称
  const eventIds = Array.from(new Set(checkIns.value.map(c => c.eventId)))
  await Promise.all(eventIds.map(async (eid) => {
    const event = await eventApi.getEvent(eid)
    eventTitles.value[eid] = event.title
  }))
  loading.value = false
})
</script>

<style scoped>
.list-card {
  max-width: 800px;
  margin: 40px auto;
}
</style> 